<template>
<div>
    <!-- 未登录的区域 -->
    <div class="header not-login" v-if="!user">
        <img src="@/assets/mobile.png" alt="" @click="$router.push('/login')">
        <span>登录 / 注册</span>
    </div>
    <!-- 登录的区域 -->
    <div class="header login" v-else>
        <div class="top">
            <div class="left">
                <van-image round width="1.76rem" height="1.76rem" :src="userInfo.photo" />
                <span>{{userInfo.name}}</span>
            </div>
            <van-button round size="mini" to="/user/profile">编辑资料</van-button>
        </div>
        <div class="bottom">
            <div class="item">
                <span>{{userInfo.art_count}}</span>
                <span>头条</span>
            </div>
            <div class="item">
                <span>{{userInfo.follow_count}}</span>
                <span>关注</span>
            </div>
            <div class="item">
                <span>{{userInfo.fans_count}}</span>
                <span>粉丝</span>
            </div>
            <div class="item">
                <span>{{userInfo.like_count}}</span>
                <span>获赞</span>
            </div>
        </div>
    </div>

    <van-grid :column-num="2" clickable>
        <van-grid-item>
            <template #icon>
                <i class="toutiao toutiao-shoucang"></i>
            </template>
            <template #text>
                <span>收 藏</span>
            </template>
        </van-grid-item>
        <van-grid-item>
            <template #icon>
                <i class="toutiao toutiao-lishi"></i>
            </template>
            <template #text>
                <span>历 史</span>
            </template>
        </van-grid-item>
    </van-grid>

    <van-cell title="消息通知" is-link />
    <van-cell title="小智同学" is-link />
    <van-cell class="logout" clickable @click="onLogout" title="退出" v-if="user" />
</div>
</template>

<script>
import { mapState } from 'vuex'
import { getUser } from '@/api/user'
export default {
  name: 'MyIndex',
  data () {
    return {
      userInfo: {}
    }
  },
  created () {
    // 只有登录的情况下我们才去拿当前用户的数据
    if (this.user) {
      this.getUserInfo()
    }
  },
  methods: {
    onLogout () {
      this.$dialog.confirm({
        title: '确认退出吗?'
      }).then(() => {
        this.$store.commit('setUser', null)
      }).catch(() => {})
    },
    async getUserInfo () {
      // 如果把ajax代码写在这里，不好，会导致当前组件和ajax代码耦合的
      try {
        const { data: res } = await getUser()
        this.userInfo = res.data
        console.log(res.data)
      } catch (err) {
        this.$toast.fail('请求用户数据失败')
      }
    }
  },
  computed: {
    ...mapState(['user'])
  }
}
</script>

<style lang="less" scoped>
.header {
    height: 361px;
    background: url(~@/assets/banner.png);
    background-size: cover;
}

.not-login {
    display: flex;
    justify-content: center;
    align-items: center;
    // 主轴的方向 就像写字一样
    flex-direction: column;

    img {
        width: 120px;
        height: 120px;
        margin-bottom: 15px;
    }

    span {
        font-size: 28px;
        color: #fff;
    }
}

.login {
    .top {
        height: 231px;
        // background:pink;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            font-size: 28px;
            color: #fff;
            display: flex;
            align-items: center;

            .van-image {
                margin-right: 15px;
            }
        }
    }

    .bottom {
        height: 130px;
        // background:blue;
        padding: 0 20px;
        display: flex;

        .item {
            height: 130px;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;

            // span:nth-child(1){
            //   font-size:28px;
            // }
            // span:nth-child(2){
            //   font-size:16px;
            // }
            span {
                &:nth-child(1) {
                    font-size: 28px;
                }

                &:nth-child(2) {
                    font-size: 16px;
                }
            }
        }
    }
}

.van-grid-item {
    &:first-child {
        i {
            color: #eb5253;
        }
    }

    &:last-child {
        i {
            color: #ff9d1d;
        }
    }

    i {
        font-size: 45px;
        // &作用i和first-child作用于同一个元素

    }

    span {
        font-size: 28px;
    }
}

.logout {
    text-align: center;
}
</style>
